<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="__STATIC__/css/mui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" href="__STATIC__/css/common.css">
    <link rel="stylesheet" href="__STATIC__/css/module.css">
    <link rel="stylesheet" href="__STATIC__/css/mui.picker.min.css" />
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/mui.min.js"></script>
    <script src="__STATIC__/js/swiper.jquery.min.js"></script>
    <script src="__STATIC__/js/mui.picker.min.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"  href="{:url('index/User/index')}"></a>
    <h1 class="mui-title">个人信息</h1>
</header>
<div class="mui-content">
    <div class="myself-info">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#picture" id="head" class="mui-navigate-right head-c">
                    头像
                    <span class="mui-pull-right head">
                    <img class="head-img mui-action-preview"  id="head-img1" src="{$arr.m_pic}"/>
                </span>
                </a>
            </li>
            
            <li class="mui-table-view-cell">
                <a href="{:url('index/User/nicheng',array('nicheng'=>$arr['m_nickname']))}" class="mui-navigate-right">昵称<span class="mui-pull-right">{$arr.m_nickname}</span></a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="#choise-sex">性别<span class="mui-pull-right" id="sex-inner">
                {if condition="$arr.m_sex eq 1"} 
                男
                {else}
                女
                {/if}
                </span></a>
            </li>
            <li class="mui-table-view-cell">
                <a data-options='{"type":"date","beginYear":1920,"endYear":2030}' class="btn mui-navigate-right">出生日期<span class="mui-pull-right" id="result">{$arr.m_riqi}</span></a>
            </li>
        </ul>
    </div>
</div>
<div id="choise-sex" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#" class="sex-c">男</a>
        </li>
        <li class="mui-table-view-cell">
            <a href="#" class="sex-c">女</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#choise-sex"><b>取消</b></a>
        </li>
    </ul>
</div>
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell upload-photo">
            <a>从手机相册中选择</a>
            <input id="file" type="file" onchange="UpladFile();">
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#picture"><b>取消</b></a>
        </li>
    </ul>
</div>

<script>
mui(document.body).on('tap','a',function(){
		document.location.href=this.href;
	});
 var xhr;  
  
            function createXMLHttpRequest() {  
                if (window.ActiveXObject) {  
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                } else if (window.XMLHttpRequest) {  
                    xhr = new XMLHttpRequest();  
                }  
            }  
  
            function UpladFile() {  
                var fileObj = document.getElementById("file").files[0];  
                var FileController = '{:url("index/User/uploads")}'; 
                
                var form = new FormData();  
                form.append("file", fileObj);  
                createXMLHttpRequest();  
                xhr.onreadystatechange = handleStateChange;  
                xhr.open("post", FileController, true);  
                xhr.send(form);  
            }  
  
            function handleStateChange() { 

                if (xhr.readyState == 4) {  
                    location.reload();
                }  
            }  

    (function($) {
        $.init();
        var result = $('#result')[0];
        var btns = $('.btn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                /*
                 * 首次显示时实例化组件
                 * 示例为了简洁，将 options 放在了按钮的 dom 上
                 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                 */
                var picker = new $.DtPicker(options);
                picker.show(function(rs) {
                    /*
                     * rs.value 拼合后的 value
                     * rs.text 拼合后的 text
                     * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                     * rs.m 月，用法同年
                     * rs.d 日，用法同年
                     * rs.h 时，用法同年
                     * rs.i 分（minutes 的第二个字母），用法同年
                     */
                    result.innerText =  rs.text;
                    url = "{:url('index/User/gainan')}";
            $.post(url, {xing:rs.text,ty:1}, function (data) {})
                    /*
                     * 返回 false 可以阻止选择框的关闭
                     * return false;
                     */
                    /*
                     * 释放组件资源，释放后将将不能再操作组件
                     * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                     * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                     * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                     */
                    picker.dispose();
                });
            }, false);
        });
        /*选择性别*/
        var info = document.getElementById("sex-inner");
        mui('body').on('tap', '#choise-sex.mui-popover-action li>a.sex-c', function() {
            var a = this,
                parent;
            //根据点击按钮，反推当前是哪个actionsheet
            for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
                if (parent.classList.contains('mui-popover-action')) {
                    break;
                }
            }
            //关闭actionsheet
            mui('#' + parent.id).popover('toggle');
            url = "{:url('index/User/gainan')}";
            $.post(url, {xing:a.innerHTML,ty:2}, function (data) {})
            
            info.innerHTML =  a.innerHTML;
        })
    })(mui);
</script>
</body>
</html>